博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 浏览器滑动页面滚动条时,获取元素距离浏览器顶部距离,并且固定浮动导航...
阅读量:7228 次
发布时间:2019-06-29

本文共 1172 字,大约阅读时间需要 3 分钟。

 浏览器滑动页面滚动条时,获取元素距离浏览器顶部距离,动态获取。

举个栗子:

这是要循环的div,要菜单$(".mdtit") 在$(".box")距离顶部小于20px时保持浮动。

学校介绍

 

.nav_index_fix {
position: fixed; left: 0; top: 0;}

 

$(function(){        $(window).scroll(function(){            $(".box").each(function(){                //所有需要计算距离浏览器顶端高度的元素                var scrollTop = $(window).scrollTop();// 网页被卷起来的高度                var nap_top = $(this).offset().top;        //页面元素距离文档顶端高度距离                if(nap_top-scrollTop < 20){              //元素距离浏览器顶部高度                    $(".mdtit").removeClass("nav_index_fix");                          $(this).children(".mdtit").addClass("nav_index_fix");                }else{                    $(this).find(".mdtit").removeClass("nav_index_fix");                }            })        });    });

注意:声明的变量必须写在each循环里面,当滑动时才能动态获取当前元素距离顶部的距离

转载于:https://www.cnblogs.com/i6010/articles/6543067.html

你可能感兴趣的文章
基于Nodejs的前端灰度发布方案_20190228
查看>>
TP5实现支付宝电脑网站支付学习笔记
查看>>
如何绘制最美的鱼骨图?
查看>>
import提升导致Fundebug报错:“请配置apikey”
查看>>
GitBash连接GitHub
查看>>
vscode 中对vue进行格式化
查看>>
为什么 kubernetes 天然适合微服务 (2)
查看>>
EMQ 配置
查看>>
Python--面向对象进阶
查看>>
偏向锁状态转移原理
查看>>
Angular5升级至Angular7
查看>>
通过VuePress管理项目文档(一)
查看>>
webpack-chain项目中文翻译
查看>>
JavaScript 数组操作方法小结
查看>>
关于 ClojureScript 裸写 stateful React Component
查看>>
gson-plugin深入源码分析(三)
查看>>
leetcode-846-Hand of Straights
查看>>
rpm包管理功能全解
查看>>
web前端开发编码规范及性能优化
查看>>
安装LNMP开发环境
查看>>